<template>
  <el-container>
    <el-header>
      <Header1></Header1>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <div>
      <el-menu
        mode="horizontal"
        style="border: none; float: right; margin-right: 100px"
      >
        <el-menu-item
          index="1"
          style="
            border-left: 1px solid lightgrey;
            border-right: 1px solid lightgrey;
          "
          @click="$router.push('/myufun')"
          >我的优坊</el-menu-item
        >
        <el-menu-item
          index="1"
          style="border-right: 1px solid lightgrey"
          @click="$router.push('/myaddress')"
          >我的地址</el-menu-item
        >
        <el-menu-item
          index="2"
          style="border-right: 1px solid lightgrey"
          @click="$router.push('/myorder')"
          >我的订单</el-menu-item
        >
      </el-menu>
    </div>
    <div
      style="
        height: 1px;
        background-color: lightgrey;
        margin-top: 0px;
        opacity: 0.4;
      "
    ></div>
    <el-main>
      <div class="mytitle">
        <b>地址管理</b>
      </div>
      <div
        style="
          height: 1px;
          background-color: lightgrey;
          margin-top: 100px;
          opacity: 0.4;
        "
      ></div>
      <div class="myaddress">
        <div style="float: left; margin-top: 50px; margin-left: 25px">
          <b>地址信息</b>
        </div>
        <div style="margin-top: 100px; margin-left: 25px">
          <el-form label-width="100px" :model="address">
            <el-form-item label="收获人姓名">
              <el-input
                id="name"
                style="width: 75%"
                v-model="address.receiveName"
              ></el-input>
            </el-form-item>
            <el-form-item label="省市区" v-if="btnMessage=='更新地址'" style="text-align:left">
              <span style="margin-left:70px">{{address.receiveProvince}}/{{address.receiveCity}}/{{address.receiveCounty}}</span>
            </el-form-item>
            <el-form-item label="省市区选择">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                style="width: 75%"
                @change="change"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input
                style="width: 75%"
                v-model="address.receiveAddress"
              ></el-input>
            </el-form-item>
            <el-form-item label="收获人电话">
              <el-input
                id="phone"
                style="width: 75%"
                v-model="address.receivePhone"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮政编码">
              <el-input style="width: 75%" v-model="address.zipCode"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="float: right; margin-right: 80px"
                @click="save"
                >{{ btnMessage }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header1 from "@/views/Header.vue";
import { regionData, CodeToText,TextToCode} from "element-china-area-data";
import { getItem } from "@/utils/localStorage.js";
import { getById } from "@/api/user.js";
import { getByUser, addAddress, updateAddress } from "@/api/address.js";
export default {
  components: { Header1 },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      address: {},
      btnMessage: "",
    };
  },
  created() {
    getByUser(getItem("id")).then((res) => {
      if (res.data.code == "0000") {
        if (res.data.data == null) {
          getById(getItem("id")).then((res) => {
            if (res.data.code == "0000") {
              document.getElementById("name").value = res.data.data.realName;
              document.getElementById("phone").value = res.data.data.phone;
            }
          });
          this.btnMessage = "添加地址";
        } 
        else {
          this.address = res.data.data;
          console.log(this.address)
          // console.log(this.address.receiveProvince)
          // console.log(TextToCode[this.address.receiveProvince].code)
          this.selectedOptions[0]=TextToCode[this.address.receiveProvince].code
          this.selectedOptions[1]=TextToCode[this.address.receiveProvince][this.address.receiveCity].code
          this.selectedOptions[2]=TextToCode[this.address.receiveProvince][this.address.receiveCity][this.address.receiveCounty].code
          // console.log(this.address.receiveCity)
          // console.log(this.address.receiveCounty)
          // this.selectedOptions[0]=TextToCode[this.address.receiveProvince].code
          // this.selectedOptions[1]=TextToCode[this.address.receiveCity].code
          // this.selectedOptions[2]=TextToCode[this.address.receiveCounty].code
          console.log(this.selectedOptions)
          this.btnMessage = "更新地址";
        }
      }
    });
  },
  methods: {
    save() {
      this.address.receiveProvince = CodeToText[this.selectedOptions[0]];
      this.address.receiveCity = CodeToText[this.selectedOptions[1]];
      this.address.receiveCounty = CodeToText[this.selectedOptions[2]];
      this.address.receiveName = document.getElementById("name").value;
      this.address.receivePhone = document.getElementById("phone").value;
      this.address.userId=getItem("id")
      console.log(this.address);
      if (this.btnMessage == "添加地址") {
        addAddress(this.address).then((res) => {
          if (res.data.code == "0000") {
            this.$message.success("添加成功");
            location.reload();
          }
        });
      } else if (this.btnMessage == "更新地址") {
        console.log(this.address)
        updateAddress(this.address).then((res) => {
          if (res.data.code == "0000") {
            this.$message.success("更新成功");
            location.reload();
          }
        });
      }
    },
    change(value){
      console.log(value)
    }
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  line-height: 100%;
  height: 1000px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
.mytitle {
  float: left;
  font-size: 25px;
  margin-left: 100px;
  margin-top: 50px;
}
.myaddress {
  width: 650px;
  height: 600px;
  background-color: white;
  float: left;
  font-size: 20px;
  margin-left: 100px;
  margin-top: 50px;
}
</style>